<template>
    <div>
        <div v-if="showwechat">
            <Row :gutter="16" class="ivu-mt-8 ivu-mb-8">
                <Col span="8" v-for="item in datacontent" :key="item.id" style="cursor: pointer;">
                <div @click="dataparams(item.id)">
                    <Card dis-hover :class="dataid === item.id ? 'ivu-active' : ''">
                        <Avatar class="ivu-fl ivu-mr-16" size="large" :src="item.avatar" />
                        <Row type="flex" align="middle" justify="space-between">
                            <Col span="20">
                            <h3 class="sky-nickname">
                                <Ellipsis :text="item.nickname" :length="18" :tooltip="true" />
                            </h3>
                            <p class="sky-wxid">{{ item.friend_wechatno }}</p>
                            </Col>
                            <Col span="4" v-if="+item.is_bind === 1">
                                <a @click.stop="unbind(item)">
                                    解绑
                                </a>
                            </Col>
                        </Row>
                    </Card>
                </div>
                </Col>
            </Row>
            <Divider style="margin: 12px;" />
            <Row :gutter="32">
                <Col span="8">
                <DescriptionList class="ivu-mt-16" :col="1">
                    <Description>
                        <Select v-if="wxlist.length>1" v-model="paramsrecord.wechat_id" v-width="180" @on-change="changewx">
                            <Option v-for="item in wxlist" :value="item.wechatid" :key="item.wechatid">{{
                                item.wechatnick }}</Option>
                        </Select>
                        <p v-else-if="wxlist.length=1">{{wxlist[0]?wxlist[0].wechatnick:''}}</p>
                    </Description>
                    <Description>
                        <tag v-for="(item, index) in dataparamslist.tags_arr" :key="index">{{ item }}</tag>
                    </Description>
                    <Description term="来源：">{{
                        dataparamslist.source_type_str
                        }}</Description>
                    <Description term="备注名：">{{
                        dataparamslist.remark_name
                        }}</Description>
                    <Description term="微信状态：">
                        <Badge status="success" v-if="+dataparamslist.state === 0" :text="dataparamslist.state_str" />
                        <Badge status="warning" v-else-if="+dataparamslist.state === 1"
                            :text="dataparamslist.state_str" />
                        <Badge status="error" v-else-if="+dataparamslist.state === 2"
                            :text="dataparamslist.state_str" />
                        <Badge status="warning" v-else-if="+dataparamslist.state === 3"
                            :text="dataparamslist.state_str" />
                        <Badge status="error" v-else-if="+dataparamslist.state === 4"
                            :text="dataparamslist.state_str" />
                    </Description>
                    <Description term="加好友天数：">{{
                        dataparamslist.create_day
                        }}</Description>
                    <Description term="未互动天数：">{{
                        dataparamslist.unchat_day
                        }}</Description>
                    <Description term="通过时间：">{{
                        dataparamslist.create_time
                        }}</Description>
                </DescriptionList>
                </Col>
                <Col span="16">
                <div class="sky-record">
                    <chatDetail :paramsrecord="paramsrecord" :userInfo="userInfo" ref="liaotian" />
                </div>
                </Col>
            </Row>
        </div>
        <div class="wechatnull" v-else>
            <span>暂无信息</span>
        </div>
    </div>
</template>
<script>
    import { patientindexwechatinfo, patientindexunbindwechat } from '@/api/patient';
    import chatDetail from './chatrecord'
    export default {
        name: 'wechat',
        components: { chatDetail },
        props:['userInfo'],
        data () {
            return {
                wxlist: [],
                dataid: '',
                paramsrecord: { wechat_id: '', friend_id: '',id:''},
                params: { patient_user_id: '' },
                datacontent: [],
                showwechat: true,
                dataparamslist: {}
            };
        },
        methods: {
            askData (id) {
                this.dataid = '';
                this.paramsrecord = { wechat_id: '', friend_id: '',id:'' };
                this.datacontent = [];
                this.dataparamslist = {};
                this.params.patient_user_id = id;
                this.askDatas();
            },
            askDatas () {
                patientindexwechatinfo(this.params).then((res) => {
                    if (res.list.length > 0) {
                        this.showwechat = true;
                        this.datacontent = res.list;
                        this.dataparams(res.list[0].id);
                    } else {
                        this.showwechat = false;
                    }
                });
            },
            dataparams (id) {
                this.dataid = id;
                this.datacontent.forEach((item) => {
                    // console.log(item,'item1')
                    if (item.id === id) {
                        this.dataparamslist = item.wechat_list[0];
                        this.wxlist = item.wechat_list;
                        this.paramsrecord.wechat_id = item.wechat_list[0].wechatid;
                        this.paramsrecord.friend_id = item.friendid;
                        // this.paramsrecord.id=item.id
                        this.wechatmessagelists(item);
                    }
                });
            },
            wechatmessagelists (row) {
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatas('end');
                });
            },
            changewx (item) {
                // console.log(item,'changex')
                this.paramsrecord.wechat_id = item;
                this.dataparamslist = this.wxlist.filter(ee => ee.wechatid === item)[0]
                if (this.paramsrecord.wechat_id && this.paramsrecord.friend_id) {
                    this.$nextTick(() => {
                        this.$refs.liaotian.askDatas('end');
                    });
                }
            },
            unbind (item) {
                let params = {
                    wechat_id: item.friend_wechatno,
                    id: this.params.patient_user_id
                };
                this.$Modal.confirm({
                    title: '解绑提示',
                    content: `<p>解绑后微信聊天记录将不在患者微信信息中展示</p>`,
                    onOk: () => {
                        patientindexunbindwechat(params).then(() => {
                            this.$Message.success('解绑成功');
                            this.askData(this.params.patient_user_id);
                        });
                    }
                });
            }
        }
    };
</script>
<style scoped>
    .ivu-weixin {
        color: #777;
        font-size: 12px;
    }

    .sky-wxid {
        color: #777;
        margin-top: 2px;
        font-size: 12px;
    }

    .sky-record {
        /* border: 1px solid #dcdcdc; */
        height: 440px;
    }

    .ivu-active {
        border: 1px solid #2d8cf0;
    }

    .person {
        color: #999;
    }
</style>
<style scoped>
    .hqcard {
        position: absolute;
        top: 110px;
        left: 24px;
        right: 24px;
        bottom: 24px;
        overflow: auto;
        margin: auto;
    }

    .wechatnull {
        height: calc( 100vh - 390px);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
